<template>
  <div class="app-container" style="display: flex; justify-content: center">
    <div style="width: 50%;">
      <div style="margin-bottom: 10px; display: flex; justify-content: space-between">
        <el-button size="mini" type="primary" @click="handleBack" plain icon="el-icon-back">返 回</el-button>
        <el-button size="mini" type="success" @click="handlePrint" plain icon="el-icon-printer">打 印</el-button>
      </div>
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="培训计划信息" name="first">
          <el-descriptions title="基础信息" column="1">
            <el-descriptions-item label="计划名称">{{ data.planName }}</el-descriptions-item>
            <el-descriptions-item label="计划分类">
              <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_train_category"
                        :value="data.trainCategoryId"/>
            </el-descriptions-item>
            <el-descriptions-item label="知识分类">{{ data.knowledgeCategories }}</el-descriptions-item>
            <el-descriptions-item label="起始时间">{{ data.startTime }} 至 {{ data.endTime }}</el-descriptions-item>
            <el-descriptions-item label="培训工时">{{ data.trainWorkHours }}</el-descriptions-item>
            <el-descriptions-item label="培训讲师">{{ data.trainLecturer }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_status"
                        :value="data.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="参与人">
              <div style="display: flex; flex-wrap: wrap">
                <el-tag size="mini" style="margin: 0 5px 5px 0" v-for="(user, index) in data.users" :key="index"
                        :type="getUserTrainStatus(user) === '已完成' ? 'success': 'danger'">
                  {{ user.nickName }}
                </el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="参与部门">
              <div v-if="userDepts.length > 0" style="display: flex; flex-wrap: wrap">
                <el-tag size="mini" style="margin: 0 5px 5px 0" v-for="(dept, index) in userDepts" :key="index">
                  {{ dept }}
                </el-tag>
              </div>
              <div v-else>
                无
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="培训类型">
              <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_train_type"
                        :value="data.trainType"/>
            </el-descriptions-item>
            <el-descriptions-item label="考试类型">
              <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_exam_type"
                        :value="data.examType"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="培训进度" name="second" v-if="data.trainType !== '0'">
          <div v-if="data.trainType === '1'">
            <el-descriptions title="培训课程" column="1"/>
            <div v-for="(course, index) in data.courses" :key="index"
                 style="background: rgb(230,229,229); border-radius: 10px; padding: 20px; display: flex; height: 160px">
              <div>
                <el-image
                  style="height: 100%"
                  :src="JSON.parse(course.picture)[0].url"
                  fit="fit"/>
              </div>
              <div style="margin-left: 10px;">
                <div style=" font-size: 20px; font-weight: bolder">
                  {{ course.title }}
                </div>
                <div style="color: #c5a6a6; font-size: 14px">
                  讲师：{{ course.lector }}
                </div>
                <div style="color: #c5a6a6; font-size: 14px">
                  课程介绍：{{ course.intro }}
                </div>
              </div>
            </div>
            <el-descriptions title="用户培训进度" column="1" style="margin-top: 20px"/>
            <el-card v-for="(user, index) in data.users" :key="index"
                     style=" margin: 10px 0;">
              <div style="display: flex; align-items: center; justify-content: space-between">
                <div style="display: flex; align-items: center">
                  <el-avatar style="margin-right: 5px" :size="36" :src="user.avatar" @error="true">
                    {{ user.nickName.substr(0, 1) }}
                  </el-avatar>
                  <span style="font-size: 14px">{{ user.nickName }}</span>
                </div>
                <div style="display: flex; align-items: center">
                  <span style="font-size: 14px">
                    {{
                      getUserTrainStatus(user)
                    }}
                  </span>
                </div>
              </div>
              <div v-if="user.courseDetails.length > 0" v-for="(course, cIndex) in user.courseDetails" :key="cIndex"
                   style="margin-top: 10px; background: rgb(244,241,241); padding: 10px; border-radius: 10px">
                <div
                  style="display: flex; width: 100%; align-items: center; margin-bottom: 10px">
                  <el-image
                    style="width: 100px;"
                    :src="JSON.parse(course.picture)[0].url"
                    fit="fit"/>
                  <div style="margin-left: 10px">
                    <div style="display: flex; align-items: center">
                      <span>{{ course.title }}</span>
                      <el-tag style="margin-left: 5px" size="mini">{{ course.status === '1' ? '进行中' : '已完成' }}
                      </el-tag>
                    </div>
                    <div style="font-size: 12px">讲师：{{ course.lector }}</div>
                  </div>
                </div>
                <div v-for="(courseware, cwIndex) in course.details" :key="cwIndex"
                     style=" display: flex; align-items: center; justify-content: space-between; margin: 5px 0">
                  <div style="display: flex; align-items: center">
                    <div class="imgPdf">{{ courseware.type }}</div>
                    <div>
                      <div style="font-size: 14px;">{{ courseware.title }}</div>
                      <div style="display: flex; align-items: center; font-size: 12px; color: #c5a6a6">
                        <div style="margin-right: 10px">
                          时长：{{
                            courseware.type === 'PDF' ? courseware.length + '页' : convertSecondsToHMS(courseware.length)
                          }}
                        </div>
                        <div v-show="courseware.type !== 'PDF'">
                          <span>进度：</span> {{ getProgress(courseware) + " %" }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="font-size: 14px; color: blue">
                    {{
                      courseware.status === "0"
                        ? "未开始"
                        : courseware.status === "1"
                          ? "学习中"
                          : "已完成"
                    }}
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <div v-else>
            <el-descriptions title="线下培训信息" column="1">
              <el-descriptions-item label="负责人">{{ offlineTrain.nickName }}</el-descriptions-item>
              <el-descriptions-item label="讲师">{{ offlineTrain.offlineTrainLecturer }}</el-descriptions-item>
              <el-descriptions-item label="地点">{{ offlineTrain.offlineTrainLocation }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_offline_status"
                          :value="offlineTrain.trainInfo.status"/>
              </el-descriptions-item>
              <el-descriptions-item label="操作时间">{{ offlineTrain.trainInfo.optTime }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ offlineTrain.trainInfo.remark }}</el-descriptions-item>
              <el-descriptions-item label="附件">
                <div style="display: flex; flex-direction: column">
                  <div v-for="(f,i) in offlineTrain.trainInfo.fileList" :key="i"
                       style="width: 500px; height: 40px; border: 1px solid #d8c0c0; border-radius: 5px; display: flex; padding: 0 10px; align-items: center; margin-bottom: 10px">
                    <el-link :href="f.url" target="_blank">{{ f.originalName }}</el-link>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="offlineTrain.trainInfo.status === '2'" label="培训合格">
                <div style="display: flex">
                  <div v-for="(u, i) in offlineTrain.trainInfo.completeUsers" :key="i"
                       style="display: flex; align-items: center; margin: 0 5px; border: 1px solid grey; padding:5px 10px; border-radius: 55px">
                    <el-avatar :src="u.avatar" size="small" @error="true">{{ u.nickName[0] }}</el-avatar>
                    <span style="margin-left: 5px">{{ u.nickName }}</span>
                  </div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item v-if="offlineTrain.trainInfo.status === '2'" label="培训不合格">
                <div style="display: flex">
                  <div v-for="(u, i) in offlineTrain.trainInfo.incompleteUsers" :key="i"
                       style="display: flex; align-items: center; margin: 0 5px; border: 1px solid grey; padding:5px 10px; border-radius: 55px">
                    <el-avatar :src="u.avatar" size="small" @error="true">{{ u.nickName[0] }}</el-avatar>
                    <span style="margin-left: 5px">{{ u.nickName }}</span>
                  </div>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="考试进度" name="third" v-if="data.examType !== '0'">
          <div v-if="data.examType === '1'">
            <el-descriptions title="考试试卷" column="1"/>
            <div v-for="(exam, index) in data.users[0].exams" :key="index"
                 style="border-radius: 10px; background: rgb(244,241,241); padding: 20px; display: flex; margin-bottom: 10px">
              <div><i style="font-size: 80px" class="el-icon-document"/></div>
              <div style="margin-left: 10px">
                <div style="font-size: 18px; font-weight: bolder">{{ exam.name }}</div>
                <div style="font-size: 14px;color: #c5a6a6;">总分：{{ exam.fraction }}分</div>
                <div style="font-size: 14px;color: #c5a6a6;">及格分：{{ exam.passFraction }}分</div>
              </div>
            </div>
            <el-descriptions title="考试进度" column="1"/>
            <el-card v-for="(user, index) in data.users" :key="index"
                     style=" margin: 10px 0;">
              <div style="display: flex; align-items: center; justify-content: space-between">
                <div style="display: flex; align-items: center">
                  <el-avatar style="margin-right: 5px" :size="36" :src="user.avatar" @error="true">
                    {{ user.nickName.substr(0, 1) }}
                  </el-avatar>
                  <span style="font-size: 14px">{{ user.nickName }}</span>
                </div>
              </div>
              <div v-for="(exam, cIndex) in user.exams" :key="cIndex"
                   style="margin-top: 10px; background: rgb(244,241,241); padding: 10px; border-radius: 10px">
                <div
                  style="display: flex; width: 100%; align-items: center; justify-content: space-between">
                  <div style="font-size: 14px">
                    <i class="el-icon-document"></i>
                    <span>{{ exam.name }}</span>
                  </div>
                  <div v-if="exam.status === '0'">
                    <el-tag size="mini">未考试</el-tag>
                  </div>
                  <div v-else>
                    <span style="font-weight: bolder; font-size: 18px">
                      <span :style="exam.score >= exam.passFraction ? 'color: green' : 'color: red'">{{
                          exam.score
                        }}分</span>
                    </span>
                  </div>
                </div>
              </div>
            </el-card>
            <!--            <el-table :data="data.users">-->
            <!--              <el-table-column label="用户名" prop="nickName"/>-->
            <!--              <el-table-column label="状态">-->
            <!--                <template slot-scope="scope">-->
            <!--                  {{ scope.row.status }}-->
            <!--                </template>-->
            <!--              </el-table-column>-->
            <!--              <el-table-column label="得分" prop="score"/>-->
            <!--            </el-table>-->
          </div>
          <div v-else>
            <el-descriptions title="线下考试信息" column="1">
              <el-descriptions-item label="负责人">{{ offlineExam.nickName }}</el-descriptions-item>
              <el-descriptions-item label="考官">{{ offlineExam.offlineExamLecturer }}</el-descriptions-item>
              <el-descriptions-item label="地点">{{ offlineExam.offlineExamLocation }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_offline_status"
                          :value="offlineExam.examInfo.status"/>
              </el-descriptions-item>
              <el-descriptions-item label="操作时间">{{ offlineExam.examInfo.optTime }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ offlineExam.examInfo.remark }}</el-descriptions-item>
              <el-descriptions-item label="附件">
                <div style="display: flex; flex-direction: column">
                  <div v-for="(f,i) in offlineExam.examInfo.fileList" :key="i"
                       style="width: 500px; height: 40px; border: 1px solid #d8c0c0; border-radius: 5px; display: flex; padding: 0 10px; align-items: center; margin-bottom: 10px">
                    <el-link :href="f.url" target="_blank">{{ f.originalName }}</el-link>
                  </div>
                </div>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="考试成绩" column="1"/>
            <el-table :data="offlineExam.examInfo.userList" size="mini" border max-height="400">
              <el-table-column label="用户名" prop="nickName"/>
              <el-table-column label="状态">
                <template slot-scope="scope">
                  <dict-tag size="mini" style="margin-right: 5px" :options="dict.type.train_plan_offline_exam_status"
                            :value="scope.row.status"/>
                </template>
              </el-table-column>
              <el-table-column label="评分" prop="score"/>
              <el-table-column label="备注" prop="remark"/>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {getOfflineExamInfo, getOfflineTrainInfo, trainPlanProgress} from "@/api/edu/trainPlan";

export default {
  name: 'progress',
  dicts: ['train_plan_status', 'train_plan_train_type', 'train_plan_exam_type', 'train_plan_status', 'train_plan_offline_status', 'train_plan_train_category', 'train_plan_offline_exam_status'],
  data() {
    return {
      id: null,
      reportUrl: process.env.VUE_APP_BASE_API + "/ureport/pdf/show?_u=file:培训计划进度.ureport.xml&_p=1&id=",
      activeName: 'first',
      data: {},
      offlineTrain: {},
      offlineExam: {},
      userDepts: []
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getData()
  },
  methods: {
    getUserTrainStatus(user) {
      return user.courseDetails.length === 0 ? '未开始' : user.courseDetails.length === this.data.courses.length ? user.courseDetails.every(course => course.status === '2') ? '已完成' : '进行中' : '进行中'
    },
    getProgress(row) {
      if (!isNaN(Number(row.length)) && !isNaN(Number(row.studyTime))) {
        return Number(
          ((Number(row.studyTime) / Number(row.length)) * 100).toFixed()
        );
      }
      return 0;
    },
    convertSecondsToHMS(seconds) {
      if (!isNaN(Number(seconds))) {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const remainingSeconds = seconds % 60;

        return hours + "小时 " + minutes + "分钟 " + remainingSeconds + "秒";
      }
      return 0 + "小时 " + 0 + "分钟 " + 0 + "秒";
    },
    getData() {
      trainPlanProgress(this.id).then(res => {
        this.data = res.data
        if (res.data.userDepts) {
          this.userDepts = res.data.userDepts.split(",")
        }
        if (this.data.trainType === '2') {
          getOfflineTrainInfo(this.id).then(response => {
            this.offlineTrain = response.data
          })
        }
        if (this.data.examType === '2') {
          getOfflineExamInfo(this.id).then(response => {
            this.offlineExam = response.data
          })
        }
      })
    },
    handleBack() {
      this.$store.dispatch("tagsView/delView", this.$route)
      this.$router.back()
    },
    handlePrint() {
      window.open(`${this.reportUrl}${this.id}`)
    }
  }
}
</script>

<style scoped>
.imgPdf {
  display: inline-block;
  width: 34px;
  height: 34px;
  background: #ff4d4f;
  text-align: center;
  line-height: 34px;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  margin-right: 12px;
}
</style>
